<script setup lang="ts">
import { lngLat2str } from '@/geom/great-circle'
import { meter2MetricStr, notify } from '@/widgets'
import { type AuxLine } from './core'
import { stringifyCoordinates } from '@/geom/geometry'
const props = defineProps<{ item: AuxLine }>()
async function copyLineString() {
  const { start, end } = props.item
  const coords = [
    [start.lng, start.lat],
    [end.lng, end.lat]
  ]
  await navigator.clipboard.writeText(stringifyCoordinates(coords))
  notify.success({ content: `[${props.item.name}]经纬度复制到剪贴板` })
}
</script>
<template>
  <div class="aux-line-info pane-block">
    <div class="row">
      <div class="col-4em">名称</div>
      <div class="col">{{ item.name }}</div>
    </div>
    <div class="row">
      <div class="col-4em">起始点</div>
      <div class="col">{{ lngLat2str(item.start) }}</div>
    </div>
    <div class="row">
      <div class="col-4em">结束点</div>
      <div class="col">{{ lngLat2str(item.end) }}</div>
    </div>
    <div class="row">
      <div class="col-4em">长度</div>
      <div class="col">{{ meter2MetricStr(item.length) }}</div>
    </div>
    <div class="row">
      <div class="col-4em">方向</div>
      <div class="col">{{ Math.floor(item.course * 100.0) / 100.0 }}°</div>
    </div>
    <div class="row" style="margin-top: 4em">
      <div class="map-hover" @click="copyLineString">[复制]</div>
    </div>
  </div>
</template>
